// 课程测评
<template>
  <div>
    <Head />
    <div class="zqalert" style="display: none">
      <div class="asa">
        <p>正确</p>
      </div>

      <p class="ok">确定</p>
    </div>
    <!-- <el-button type="text" >点击打开 Message Box</el-button> -->
    <div class="search">
      <p>课程测试</p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="title">
      <p>{{ lists.name }}</p>
    </div>
    <div v-for="(item, index) in list" :key="index" class="pages">
      <p>
        共<span class="blue">{{ arrs }}</span
        >题
      </p>
      <p>
        第<span class="blue">{{ indexa + 1 }}</span
        >题
      </p>
      <p>
        正确:<span class="blue">{{ zqs }}</span
        >题
      </p>
      <p>
        错题:<span class="red">{{ cw }}</span
        >题
      </p>
    </div>
    <p class="subject">{{ lists.title }}</p>
    <!-- <p class="subject">{{ lists.title }}</p> -->
    <div class="answer">
      <p @click="nexts(lists.A)">
        A . {{ lists.A }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.B)">
        B . {{ lists.B }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.C)">
        C . {{ lists.C }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.D)">
        D . {{ lists.D }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
    </div>
    <Footer />
  </div>
</template>

<script>
import Head from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";
import { Phrasetest } from "@/api";

export default {
  components: {
    Head,
    Footer,
  },
  data() {
    return {
      tabs: ["标题一", "标题二", "标题三"],
      // tabContents: ["内容一", "内容二","内容三"],
      num: 0,
      title: "在线英语学习系统 · 人教版 · 初中英语1年级二单元 短语拼写",
      list: [{ common: "50", third: "3", correct: "1", error: "2" }],
      subject: "-Can you finish reading these newspapers before 10 o'clock?",
      subject1: "-Yes,I can.",
      arrs: "",
      lists: {},
      con: [],
      indexa: 0,
      zqs: 0,
      cw: 0,

      // 定义
      dy: "",
    };
  },
  methods: {
    open(s) {
      this.$alert(s, " ", {
        confirmButtonText: "确定",
        callback: (action) => {
          // this.$message({
          //   type: "info",
          //   message: `action: ${action}`,
          // });
          // console.log(11)
          let indexas = this.indexa + 1;
          this.lists = this.con.data[indexas];
          this.indexa = indexas;
          console.log(this.con.data.length);
        },
      });
    },
    back() {
      this.$router.push("index");
    },
    nexts(a) {
      // console.log(zqs);
      let s = this.lists.answer;
      console.log(s);
      console.log(a);
      if (this.lists.answer == a) {
        // alert("正确");
        let s = "正确";
        this.open(s);
        // this.zqs = zqs++;
        let zqss = this.zqs + 1;
        this.zqs = zqss;
      } else {
        // alert(`错误 正确答案为${s}`);
        let s = this.lists.answer;
        console.log(s);
        s = `错误 正确答案为${s}`;
        this.open(s);
        let cws = this.cw + 1;
        this.cw = cws;
      }
      if (this.indexa > this.con.data.length) {
        alert("aaa");
      }

      // let arrss = this.arrs + 1;

      // let indexas = this.indexa + 1;
      // this.lists = this.con.data[indexas];
      // this.indexa = indexas;

      // this.arrs = arrss;
    },
  },
  created() {
    let as = this.$route.query.id;
    Phrasetest(as).then((res) => {
      console.log(res.data);
      this.con = res.data.neirong;
      this.lists = res.data.neirong.data[this.indexa];
      console.log(this.lists);
      this.arrs = res.data.neirong.data.length;
      console.log(res.data.neirong.data);
      console.log(this.arrs);
    });
  },
};
</script>
<style lang="scss" scoped>
.zqalert {
  padding-bottom: 10px;
  width: 30%;
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
  border-radius: 20px;
  position: fixed;
  top: 20%;
  left: 35%;
  background: #fff;
  color: #333;
  .asa {
    height: 200px;
    line-height: 200px;
    font-size: 30px;
  }
  .ok {
    padding: 10px 0;
    background: #3571ff;
    width: 20%;
    margin: 0 auto;
    border-radius: 10px;
    color: #fff;
  }
}
.search {
  width: 98%;
  padding: 0 1%;
  height: 40px;
  line-height: 40px;
  background-color: #3571ff;
  color: #fff;
  display: flex;
  justify-content: space-between;
  img {
    width: 1%;
    height: 22px;
    margin-top: 8px;
  }
}
.title {
  p {
    text-align: center;
    margin: 1rem 0;
    font-size: 28px;
  }
}
.pages {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0 auto;
  margin-bottom: 4rem;
  p {
    margin: 2rem 2rem;
    font-size: 19px;
    .blue {
      color: #6b95ff;
    }
    .red {
      color: #ff2424;
    }
  }
}
.subject {
  // text-align: center;
  margin-left: 14%;
  font-size: 50px;
  color: #ff2424;
  // margin: 40px 0;
}
.answer {
  width: 30%;
  margin: 100px auto;
  position: relative;
  p {
    span {
      position: absolute;
      right: -140px;
      width: 20%;
      img {
        width: 30%;
        margin-top: -6px;
      }
    }
    border: 1px solid #e1e1e1;
    margin: 0.5rem 0;
    padding: 0.5rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
  }
}
</style>